<template>
	<view class="index" :style="[pageStyle]" :class="themeName">
		<!-- <view class="">
			appConfig.pop_agreement{{ appConfig.pop_agreement }}
		</view> -->
		<bubble top="300rpx" :page="1" :discharge="isDischarge"></bubble>
		<lazy-component v-for="(item, index) in pagesData" :key="index">
			<view>
				<template v-if="item.name=='search' && item.show">
					<w-search :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='navigation' && item.show">
					<w-navigation :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='banner' && item.show">
					<w-banner :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='title' && item.show">
					<w-title :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='rubik' && item.show">
					<w-rubik :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='notice' && item.show">
					<w-notice :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='blank' && item.show">
					<w-blank :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='separate' && item.show">
					<w-separate :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='goodsgroup' && item.show">
					<w-goodsgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='tabs' && item.show">
					<w-tabs :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='coupon' && item.show">
					<w-coupon :content="item.content" :styles="item.styles" @refresh="getPageInfo" />
				</template>
				<template v-else-if="item.name=='seckill' && item.show">
					<w-seckill :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='spellgroup' && item.show">
					<w-spellgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='video' && item.show">
					<w-video :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name=='graphic' && item.show">
					<w-graphic :content="item.content" :styles="item.styles" />
				</template>
				<!-- #ifdef MP-WEIXIN -->
				<template v-else-if="item.name=='mnplive' && item.show">
					<w-mnplive :content="item.content" :styles="item.styles" />
				</template>
				<!-- #endif -->
			</view>
			<view slot="skeleton" style="height: 20vh"></view>
		</lazy-component>
		<!-- #ifndef APP-PLUS -->
		<tabbar/>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<tabbar v-show="showTabbar"/>
		<!-- #endif -->
		<index-skeleton v-show="loading" />
		<u-back-top :scroll-top="scrollTop" :top="1000"
			:customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)'}">
		</u-back-top>
		
		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.pop_agreement" title="服务协议与隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=1'
			policyPath='/bundle/pages/server_explan/server_explan?type=2' :policyStorageKey="policyStorageKey" :showTabbar.sync="showTabbar">
		</lyg-popup>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		apiIndex
	} from '@/api/store'
	import {
		apiVisit
	} from '@/api/app'
	export default {
		data() {

			return {
				isDischarge: false,
				styles: {},
				pagesData: [],
				loading: true,
				scrollTop: 0,
				policyStorageKey: 'had_read_privacy', // 保存是否同意协议缓存信息的key
				showTabbar: true, // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
			}
		},

		methods: {
			getPageInfo() {
				apiIndex().then(res => {
					const {
						common: {
							title
						},
						common,
						content
					} = res

					uni.setNavigationBarTitle({
						title
					});
					this.styles = common
					this.tempData = content.map((item, index) => {
						return {
							index,
							value: item
						}
					})
					this.splitSetData()

				}).finally(() => {
					uni.stopPullDownRefresh()
					this.loading = false
				})
			},
			splitSetData() {
				const item = this.tempData.shift()
				if (!item) return
				this.$set(this.pagesData, item.index, Object.freeze(item.value))
				setTimeout(() => {
					this.splitSetData()
				}, 100)
			},
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type,
				} = this.styles
				if (background_type == 0) return
				const style = background_type == 1 ? {
					'background-color': background_color
				} : {
					'background-image': `url(${background_image})`
				}
				return style
			},
			
			// // #ifdef APP-PLUS
			// // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
			// showTabbar() {
			// 	let isShow = false
			// 	return uni.getStorageSync(this.policyStorageKey);
			// },
			// // #endif
		},
		onPullDownRefresh() {
			this.getPageInfo()
		},
		onPageScroll(e) {
			const {
				scrollTop
			} = e
			this.scrollTop = scrollTop
		},
		onLoad() {
			this.getPageInfo()
			// 访客记录
			apiVisit()
		},
		onHide() {
			this.isDischarge = true;
		},
		onShow() {
			this.isDischarge = false;
		},
		watch: {

		}
	}
</script>

<style lang="scss">
	.index {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		min-height: calc(100vh - env(safe-area-inset-bottom));
	}
</style>
